<template>
  <el-tabs class="home-right" type="border-card" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="item in tabList" :key="item.name" :label="item.label" :name="item.name">
      <FormProperties v-if="activeName === 'form-properties'" :formData="formData"></FormProperties>
      <SubassemblyProperties :selectedSubassembly="selectedSubassembly"
        v-if="activeName === 'subassembly-properties' && !!selectedSubassembly.type"></SubassemblyProperties>
      <div v-if="activeName === 'subassembly-properties' && !selectedSubassembly.type">
        未选中组件
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import FormProperties from './components/FormProperties'
import SubassemblyProperties from './components/SubassemblyProperties'
export default {
  components: { FormProperties, SubassemblyProperties },
  props: {
    formData: {
      type: Object,
      require: true
    },
    selectedSubassembly: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // activeName: 'form-properties',
      activeName: 'subassembly-properties',
      tabList: [
        {
          label: '组件属性',
          name: 'subassembly-properties'
        },
        {
          label: '表单属性',
          name: 'form-properties'
        }
      ],

    }
  },
  computed: {},
  created() { },
  methods: {
    handleClick(tab, e) {
      console.log(tab, e);
    },
  },
}
</script>

<style scoped lang="scss"></style>